import React, { Component } from 'react'
import { AnswerApi } from '../../request/api'
import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import { AlertDispatch } from '../../utils'

class Danxuan extends Component {
    state = {
        showAnswer: false,
        isAnswer: false,
        answer:""  // 用户的回答选项
    }
    optionClick(key) {
        this.setState({ answer: key })
    }
    submitFn() {
        if (this.state.answer === "") {
            // 用户没有勾选
            this.props.showAlertFn("请勾选答案","error");
        } else {
            // 用户已勾选
            AnswerApi({
                categoryCode: this.props.categoryCode,
                actionType: "exam_test",
                userAnswer: this.state.answer,
                actionCode: this.props.categoryCode,
                // actionCode: this.props.location.state.actionCode
                id:this.props.id
            }).then(res => {
                // console.log(res);
                if (res.errCode === 0) {
                    if (this.state.answer === this.props.answer) {
                        this.props.showAlertFn("提交成功，回答正确","success");
                    } else {
                        this.props.showAlertFn("提交成功，回答错误，已登记入错题","warning");
                    }
                } else {
                    this.props.showAlertFn("答案提交失败","error");
                }
            })
            
            if (this.state.answer === this.props.answer) {
                this.setState({ showAnswer:true, isAnswer:true })
            } else {
                this.setState({ showAnswer:true, isAnswer:false })
            }
        }
    }
    render() {
        let arr = JSON.parse(this.props.optionContent || '[]')
        return (
            <div className="timu" style={{display: this.props.questionType==='one' ? 'block' : 'none'}}>
                <div className="title">
                    <div className="title_l">单选</div>
                    <div className="title_r">{this.props.title}</div>
                </div>
                <ol className="options">
                    {
                        arr.map((item, index) => (
                            <li key={index} onClick={this.optionClick.bind(this,item.key)}>
                                <i className={this.state.answer === item.key ? "iconfont icon-danxuanxiangxuanzhong" : "iconfont icon-normal"}></i>
                                <p>{item.key}、{item.value}</p>
                            </li>
                        ))
                    }
                    
                </ol>
                <div className="submit" onClick={this.submitFn.bind(this)}>提交</div>
                <div className="answer" style={{ display:this.state.showAnswer ? 'block' : 'none'}}>
                    <section className="answer_right" style={{ display: this.state.isAnswer ? 'block' : 'none' }}>
                        <p><i className="iconfont icon-ceshijieguo-dui"></i>回答正确</p>
                        {/* <h2>参考答案：</h2>
                        <div className="analysis">{this.props.analysis}</div> */}
                    </section>
                    <section className="answer_error" style={{ display: this.state.isAnswer ? 'none' : 'block' }}>
                        <p><i className="iconfont icon-cuowu"></i>回答错误</p>
                        <h2>参考答案：</h2>
                        <div className="analysis">{this.props.analysis || ""}</div>
                    </section>
                </div>
            </div>
        )
    }
}

export default connect(null,AlertDispatch)(withRouter(Danxuan))